<template>
  <!-- 增改用户弹框 -->
  <hcDialog
    dialogWidth="80%"
    dialogTitle="打印机配置"
    :isVisable="options.show"
    @closeDialog="closeFun"
    @openDialog="openFun"
    top="5%"
  >
    <div class="table-form">
      <hcTable
        :table-data="options.data"
        :options="tableOptions"
        :columns="tableColumn"
        @command="handleAction"
      >
        <template #labelStoreId="{ row }">
          <el-input v-model="row.labelStoreId" size="small" />
        </template>
        <template #labelEX="{ row }">
          <el-input-number
            v-model="row.labelEX"
            size="small"
            :controls="false"
          />
        </template>
        <template #labelEY="{ row }">
          <el-input-number
            v-model="row.labelEY"
            size="small"
            :controls="false"
          />
        </template>
        <template #labelLocation="{ row }">
          <el-switch
            v-model="row.labelLocation"
            active-text="是"
            inactive-text="否"
            :active-value="1"
            :inactive-value="0"
          ></el-switch>
        </template>
        <template #printConcentration="{ row }">
          <el-input-number
            v-model="row.printConcentration"
            size="small"
            :controls="false"
          />
        </template>
        <template #printSpeed="{ row }">
          <el-input-number
            v-model="row.printSpeed"
            size="small"
            :controls="false"
          />
        </template>
        <template #jieZhiBianJu="{ row }">
          <el-input-number
            v-model="row.jieZhiBianJu"
            size="small"
            :controls="false"
          />
        </template>
        <template #dingBuTiaoJie="{ row }">
          <el-input-number
            v-model="row.dingBuTiaoJie"
            size="small"
            :controls="false"
          />
        </template>
        <template #tingZhiWeiZhi="{ row }">
          <el-input-number
            v-model="row.tingZhiWeiZhi"
            size="small"
            :controls="false"
          />
        </template>
      </hcTable>
    </div>
  </hcDialog>
</template>

<script setup>
import { reactive, ref } from "vue";
import { getGUID } from "@/utils/index";

class PrintParams {
  labelId = "";
  code = "";
  labelStoreId = 0;
  labelEX = 0;
  labelEY = 0;
  labelLocation = 0;
  printConcentration = 0;
  printSpeed = 0;
  jieZhiBianJu = 0;
  dingBuTiaoJie = 0;
  tingZhiWeiZhi = 0;
}

const emit = defineEmits(["closeDialog"]);

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        data: null,
      };
    },
  },
});

let tableOptions = {
  showPagination: false,
  border: true,
};

let tableColumn = [
  { type: "index", width: "60", label: "序号", fixed: true },
  { prop: "labelStoreId", label: "库位号", slot: "labelStoreId" },
  { prop: "labelEX", label: "打印水平偏移", slot: "labelEX" },
  { prop: "labelEY", label: "打印垂直偏移", slot: "labelEY" },
  { prop: "labelLocation", label: "标签旋转180", slot: "labelLocation" },
  { prop: "printConcentration", label: "打印浓度", slot: "printConcentration" },
  { prop: "printSpeed", label: "打印速度", slot: "printSpeed" },
  { prop: "jieZhiBianJu", label: "介质边距(X)", slot: "jieZhiBianJu" },
  { prop: "dingBuTiaoJie", label: "标签顶部调节", slot: "dingBuTiaoJie" },
  { prop: "tingZhiWeiZhi", label: "停止位置调整", slot: "tingZhiWeiZhi" },
  {
    width: "120",
    label: "操作",
    align: "center",
    buttons: [
      {
        name: "新增",
        type: "primary",
        command: "add",
      },
      {
        name: "删除",
        type: "danger",
        command: "delete",
      },
    ],
  },
];

// 关闭弹框
const closeFun = () => {
  emit("closeDialog");
};

function openFun() {}

const handleAction = (command, row) => {
  switch (command) {
    case "add":
      let newP = new PrintParams();
      newP.labelId = props.options.data[0]?.labelId ?? "";
      newP.code = props.options.data[0]?.code ?? getGUID();
      props.options.data.push(newP);
      break;
    case "delete":
      if (props.options.data.length == 1) {
        return ElMessage.warning("至少保留一条数据");
      }
      let index = props.options.data.indexOf(row);
      props.options.data.splice(index, 1);
      break;
    default:
      break;
  }
};
</script>

<style lang="scss" scoped>
.table-form {
  display: flex;
  height: 400px;
  padding: 0px;
}
</style>
